<template>
    <div
        class="line-box"
        v-for="(item, index) in listSetProps"
        :style="{ 'justify-content': align, ...lineBoxStyle }"
        :key="index">
        <div
            :style="lineLeftStyle"
            class="line-left">{{ item.label }}</div>
        <div
            v-if="item.type == 'label-list'"
            class="line-right">
            <template v-if="listData[item.id] && listData[item.id].length > 0">
                <van-tag
                    v-for="(tag, index) in listData[item.id]"
                    :key="index"
                    class="mr5 tag"
                    type="success">
                    {{ tag }}
                </van-tag>
            </template>
        </div>
        <div
            v-else-if="item.type == 'label-btn'"
            :style="lineRightStyle"
            class="line-right">
            <van-tag
                class="tag"
                type="success">{{item.formatter ? item.formatter(listData) : listData[item.id]}}</van-tag>
        </div>
        <div
            v-else
            :style="lineRightStyle"
            class="line-right">
            <div>{{item.formatter ? item.formatter(listData) : listData[item.id]}}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        listData: Object,
        listSetProps: Array,
        lineLeftStyle: Object,
        lineRightStyle: Object,
        lineBoxStyle: Object,
        align: {
            type: String,
            default: 'flex-start'
        }
    }
};
</script>
<style lang="scss" scoped>
.line-box {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
    &:last-child {
        margin-bottom: 0px;
    }
    .line-left {
        width: 80px;
        margin-right: 10px;
        color: rgba(0, 0, 0, 0.6);
        word-wrap: break-word;
        word-break: normal;
    }
    .line-right {
        flex: 1;
        color: rgba(0, 0, 0, 1.0);
        word-break: break-word;
        max-width: 100%;
        .mr5 {
            margin-right: 5px;
        }
        .tag {
            background-color: #61CFBE;
        }
    }
}
</style>
